<template>
  <div class="about">
    <div class="cont">
      <div class="about_t"><p>有关我们</p></div>
    </div>

    <!-- 大图片———————————————————————————————————————— -->
    <div class="cont">
      <div class="banner">
            <div class="inbanner">
                <h3 class="animated fadeInDownBig">全新系列</h3>
                <div><p class="animated fadeInUpBig">

立即购买最新产品
我们拥有顶级品牌的家居产品。</p></div>
                <a  href="">立刻购买</a>

            </div>

      </div>
    </div>

    <!-- 我们的优势—————————————————————————————— -->
    <div class="cont">
      <div class="sk">
        <div>
          <img src="../../public/img/fast.png" alt=""  width="60px" height="60px"/>
          <p>急速发货</p>
          <p>下单后24小时内急速发货，全场包邮</p>
        </div>
        <div>
          <img src="../../public/img/c.png" alt="" width="60px" height="60px"/>
          <p>支持无理由退款</p>
          <p>质量问题30天内无理由退款</p>
        </div>
        <div>
          <img src="../../public/img/c.png" alt="" width="60px" height="60px"/>
          <p>24小时在线客服</p>
          <p>7x24小时全天服务 售后无忧</p>
        </div>
      </div>
    </div>

    <!-- 分割线—————————————————————————————————————————————— -->
    <div class="cont">
        <div class="line">

        </div>

    </div>


     <h4>合作设计师</h4>

    <!-- 人物介绍—————————————————————————————————————————————————————————————————————————— -->
    <div class="cont"> 
            <div class="sk ps">
        <div>
          <img src="../../public/img/p1.png" alt="" width="300px" height="300px" />
          <p>克劳迪奥先生</p>
          <p>222</p>
        </div>
        <div>
          <img src="../../public/img/p1.png" alt="" width="300px" height="300px" />
          <p>克劳迪奥先生</p>
          <p>222</p>
        </div>
        <div>
           <img src="../../public/img/p1.png" alt="" width="300px" height="300px" />
          <p>克劳迪奥先生</p>
          <p>222</p>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="less">
* {
  font-family: "Jost", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.about {
  width: 100%;
  .cont {
    width: 100%;
    .about_t {
      width: 1200px;
    
      margin: auto;
      margin-top: 50px;
      p {
        font-size: 28px;
        font-weight: 300;
      }
    }
  }
  .banner {
    width: 1200px;
    margin: auto;
    margin-top: 80px;
    height: 365px;
    background-image: url("../../public/img/banner.jpg");
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position: relative;

    .inbanner{
          padding-top: 65px;
    padding-bottom: 65px;
    float: right;
    width: 300px;
    h3{
      width: 250px;
    font-size: 34px;
    line-height: 1.2;
    text-align: left;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 15px;



    }
    p{
        width: 250px;
          font-size: 16px;
    text-align: left;
    margin-bottom: 35px;
    }
    a{

    }
    }
  }
  .sk {
    width: 1200px;
    margin: auto;
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
      div{
        width: 33.333333%;
        p:nth-child(2){
          margin-top: 10px;
          font-size: 16px;
          color:#222;
        }
        p:nth-child(3){
          width: 200px;
          margin-top: 5px;
          font-size: 16px;
          color:#888;
        }
      }
    
  }
  .line{
     width: 1200px;
    margin: auto;
    margin-top: 80px;
    border-top: rgba(127, 135, 171, 0.3) solid 1px;
  }
  .ps{
    margin-top:50px;
    div {

        text-align: center;
    img{
     
     
      border-radius: 50%;
    }
    p{
      width: 400px !important;
     
    }
    }
  }
  h4{
    text-align: center;
    margin-top: 80px;
  }
}
</style>